<template>
  <div id="AddSpecs_id">
    <el-dialog title="提示" :visible.sync="isShow.flig">
      <el-form label-width="80px" ref="form" :model="form" style="text-align: left;" width="100px">
        <el-form-item label="属性名">
          <el-input v-model="form.specsname"></el-input>
        </el-form-item>
        <el-form-item label="属性值">
          <div
            class="attr_add"
            v-for="(i,index) in att_array"
            :key="index"
            style="margin-bottom: 5px"
          >
            <el-input v-model="att_array[index]" style="width: 450px;margin-right:15px;"></el-input>
            <el-button type="success" @click="add_attr()" v-if="index === 0">新增</el-button>
            <el-button
              type="danger"
              class="aaa"
              style="margin-right:30px;"
              @click="delnumber(index)"
              v-else
            >删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="属性状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close_specs">取 消</el-button>
        <el-button type="primary" @click="add_specs_list">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 1,
      form: {
        id: 0,
        specsname: "",
        status: 1
      },
      att_array: [""]
    };
  },
  methods: {
    delnumber(index) {
      this.att_array.splice(index, 1);
    },
    close_specs() {
      this.form = {
        id: 0,
        specsname: "",
        status: 1
      };
      this.att_array = [""];
      this.isShow.flig = false;
    },
    set_sprcs_ref(obj) {
      this.form.id = obj.id;
      this.form.specsname = obj.specsname;
      this.form.status = obj.status;
      this.att_array = obj.attrs;
    },
    add_specs_list() {
      var sendData = {
        ...this.form,
        attrs: this.att_array.join(",")
      };
      var url = "/specsadd";
      if (this.form.id != 0) {
        url = "/specsedit";
      }
      this.$http.post(url, sendData).then(res => {
        if (res.code == 200) {
          this.close_specs();
          this.$emit("reload_specs");
        }
      });
    },
    add_attr() {
      if (this.att_array.length <= 4) {
        this.att_array.push("");
      }else{
        alert('最多添加4条')
      }
    }
  },
  props: ["isShow"]
};
</script>

<style>
#AddSpecs_id .attr_add {
  display: flex;
  margin: 10px auto;
}
</style>